<template>
<div style="margin-top: 30px;">
  <el-row :gutter="40">
      <el-col :span="4">&nbsp;</el-col>
      <!-- 循环加载文字介绍 -->
      <el-col :span="4" v-for="intro in introList" :key="intro.title">
        <div style="text-align: center">
            <el-link type="primary" class="new-introduction">{{intro.title}}</el-link>
        </div>
        <div style="margin-top: 20px;">{{intro.content}}</div>
      </el-col>

      
      <el-col :span="4"></el-col>
    </el-row>
    </div>
</template>

<script>
export default {
    data() {
        return {
            introList: [
                {title: "新手引导", content: "带你四步玩转AI Studio, 更享专属算力礼包"},
                {title: "AI 学习地图", content: "系统学习路径, 从小白成长为大牛"},
                {title: "飞桨产业实践范例库", content: "典型产业应用案例投射，直达产业落地的\"自动导航\""},
                {title: "直播日历", content: "免费AI直播课，精彩内容早知道"}
            ],
        }
    }
}
</script>

<style>
.new-introduction {
  font-size: 20px;
  color: black;
}

.new-introduction:hover {
  color: blue;
}
</style>